<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="时间" width="170">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="类型" prop="reportTypeValue" width="100"/>
      <el-table-column align="center" label="举报项" prop="reportDesc" />
      <el-table-column align="center" label="被举报人/来源" prop="reportDesc" />
      <el-table-column align="center" label="举报内容" prop="reportDesc" />
      <el-table-column align="center" label="举报人" prop="reportDesc" />
      <el-table-column align="center" label="处理方式">
        <template slot-scope="scope">{{ scope.row.processState == '0' ? scope.row.processWayValue : '/' }}</template>
      </el-table-column>
      <el-table-column align="center" label="处理描述">
        <template slot-scope="scope">{{ scope.row.processState == '0' ? scope.row.processDesc : '/' }}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.processState == '0' ? true : false" size="mini" @click="changeStatus(scope.row.userId, scope.row.id)">{{ scope.row.processStateValue }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="totalPages>1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" align="center" @pagination="fetchData" />
    <el-dialog :visible.sync="dialogFormVisible" title="请审核" width="50%" center>
      <el-form size="medium">
        <el-form-item>
          <el-radio v-model="value" label="0">忽略</el-radio>
          <el-radio v-model="value" label="1">删除</el-radio>
          <el-radio v-model="value" label="2">冻结</el-radio>
        </el-form-item>
        <el-form-item v-show="value=='0' || value=='1'">
          <el-input v-model="inputValue" placeholder="处理描述"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReportList, handleReport, frozenUser } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
export default {
  name: 'Report',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      totalPages: 0,
      listQuery: {
        page: 1,
        size: 15
      },
      userId: '',
      id: '',
      value: '1',
      inputValue: '',
      dialogFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getReportList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        this.totalPages = response.data.totalPages
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    changeStatus(userId, id) {
      this.value = '0'
      this.dialogFormVisible = true
      this.userId = userId
      this.id = id
    },
    updateStatus() {
      if (this.value === '2') {
        // 冻结
        frozenUser({
          userId: this.userId,
          type: 1
        }).then(response => {
          setTimeout(() => {
            this.listLoading = false
          }, 300)
          if (response.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.listQuery.page = 1
            this.fetchData()
          } else {
            this.$message.error('操作失败请重试')
          }
        })
      } else {
        // 忽略&删除
        handleReport({
          id: this.id,
          processWay: this.value,
          processDesc: this.inputValue
        }).then(response => {
          setTimeout(() => {
            this.listLoading = false
          }, 300)
          if (response.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.listQuery.page = 1
            this.fetchData()
          } else {
            this.$message.error('操作失败请重试')
          }
        })
      }
    }
  }
}
</script>
